<fieldset class="layui-elem-field layui-field-title site-title">
  <legend><a name="fixbar">校园卡充值</a></legend>
</fieldset>
<form id="chargeForm" class="layui-form" action="##" onsubmit="return false"> <!-- 提示：如果你不想用form，你可以换成div等任何一个普通元素 -->
<!--  <div class="layui-form-item">-->
<!--    <label class="layui-form-label">用户名</label>-->
<!--    <div class="layui-form-mid layui-word-aux" id="username">username</div>-->
<!--  </div>-->
  <div class="layui-form-item">
    <label class="layui-form-label">校园卡余额(元)</label>
    <div class="layui-form-mid layui-word-aux" id="balanceBody">balanceBody</div>
  </div>
  <div class="layui-form-item">
    <label class="layui-form-label">学工号</label>
    <div class="layui-form-mid layui-word-aux" id="cardIDBody">cardIDBody</div>
  </div>
  <div class="layui-form-item">
    <label class="layui-form-label">充值方式</label>
    <div class="layui-input-block">
      <select name="chargeType" lay-filter="chType">
        <option value="0" selected>重庆大学网上缴费平台</option>
      </select>
    </div>
  </div>
  <div class="layui-form-item">
    <label class="layui-form-label">充值金额</label>
    <div class="layui-input-block">
      <input id="inputBar" type="text" name="money" placeholder="100"
             value = "100" autocomplete="off" class="layui-input">
    </div>
  </div>

  <div class="layui-form-item">
    <table class="layui-table">
      <colgroup>
        <col>
      </colgroup>
      <tbody>

      <tr>
        <td style="padding: 0"><a class="layui-btn" href="javascript:$('#inputBar').val(50)" style="display:block;text-align: center;">50元</a></td>
        <td style="padding: 0"><a class="layui-btn" href="javascript:$('#inputBar').val(100)" style="display:block;text-align: center;">100元</a></td>
        <td style="padding: 0"><a class="layui-btn" href="javascript:$('#inputBar').val(200)" style="display:block;text-align: center;">200元</a></td>
        <td style="padding: 0"><a class="layui-btn" href="javascript:$('#inputBar').val(500)" style="display:block;text-align: center;">500元</a></td>
      </tr>
      </tbody>
    </table>
  </div>

  <div class="layui-form-item">
    <div class="layui-input-block">
      <button class="layui-btn" lay-submit lay-filter="charge">立即提交</button>
      <button type="reset" class="layui-btn layui-btn-primary">重置</button>
    </div>
  </div>
  <!-- 更多表单结构排版请移步文档左侧【页面元素-表单】一项阅览 -->
</form>
<script>

  function selectCard() {
    $.ajax({
      //几个参数需要注意一下
      type: "get",//方法类型
      dataType: "json",//预期服务器返回的数据类型
      url: "http://localhost:8080/money/getCardBalance",//url
      success: function (datas) {
        console.log(datas);//打印服务端返回的数据(调试用)
        console.log(datas.length);//打印服务端返回的数据(调试用)
        $('#cardIDBody').html(datas.userID);
        $('#balanceBody').html(datas.cardBalance);
        // $('#username').html(datas.username);
      },
      error: function () {
        layer.msg("网络异常！请稍后再试");
      }

    });
  };
  var submitFlag =true;
  function chargeForm() {
    if(submitFlag == false){
      return false;
    }
    submitFlag = false;
    $.ajax({
      //几个参数需要注意一下
      type: "GET",//方法类型
      dataType: "json",//预期服务器返回的数据类型
      url: "http://localhost:8080/money/addCredit",//url
      data: $('#chargeForm').serialize(),
      success: function (datas) {
        submitFlag = true;
        console.log(datas);//打印服务端返回的数据(调试用)
        var temp = $('#balanceBody').html();
        if (temp == datas.cardBalance)
        {
          layer.msg("缴费失败，请稍后再试");
        }
        else {
          $('#balanceBody').html(datas.cardBalance);
          layer.msg("缴费成功");
          }

      },
      error: function () {
        submitFlag = true;
        layer.msg("网络异常！请稍后再试");
      }

    });
  };
  layui.use('form', function(){
    var form = layui.form;
    // layer.msg("chargeForm");
    form.render();
    //各种基于事件的操作，下面会有进一步介绍
    form.on('submit(charge)', function(data){

      console.log(data.elem) //被执行事件的元素DOM对象，一般为button对象
      console.log(data.form) //被执行提交的form对象，一般在存在form标签时才会返回
      console.log(data.field) //当前容器的全部表单字段，名值对形式：{name: value}
      chargeForm();
      return false; //阻止表单跳转。如果需要表单跳转，去掉这段即可。
    });
  selectCard();
  });
</script>